import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"
import './style.css'

// 初始化 viewer
const viewer = new Cesium.Viewer('cesiumContainer',{
  imageryProviderViewModels: [
    ...Cesium.createDefaultImageryProviderViewModels(),
    // 添加自定义的影像图层
    new Cesium.ProviderViewModel({
      name: '自定义地图', // 显示名称
      iconUrl: '/path/to/icon.png', // 图标路径
      tooltip: '这是自定义地图图层', // 提示文本
      creationFunction: function() {
          return  new Cesium.WebMapTileServiceImageryProvider({
            url: "https://trek.nasa.gov/tiles/Moon/EQ/LRO_WAC_Mosaic_Global_303ppd/1.0.0//{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg",
            layer: "LRO_WAC_Mosaic_Global_303ppd",
            style: "default",
            format: "image/jpg",
            tileMatrixSetID: "default028mm",
            maximumLevel: 6,
            tilingScheme: new Cesium.GeographicTilingScheme(),
          });    
      }
  })
  ]
})

// 设置默认视角
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.391, 39.904, 1000000.0)
})

// 飞到北京的功能
document.getElementById('flyToBeijing').onclick = () => {
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.391, 39.904, 15000.0),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-45.0),
      roll: 0.0
    },
    duration: 3
  })
}

// 添加标记的功能
document.getElementById('addMarker').onclick = () => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.391, 39.904),
    billboard: {
      image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Red_marker.svg/32px-Red_marker.svg.png',
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
    label: {
      text: '北京',
      font: '14pt sans-serif',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -10)
    }
  })
}

// 添加地形的功能
document.getElementById('addTerrain').onclick = async () => {
  const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl("http://localhost:8080/v1/tilesets/ldem_1024_30n_45n_090_120_lbl/tiles",
    {
      requestVertexNormals: true
    });
  viewer.terrainProvider = terrainProvider;

  // 加载特定瓦片
  try {
    const request = new Cesium.Request({
      type: Cesium.RequestType.TERRAIN,
      headers: {
        'Authorization': 'Bearer ' + Cesium.createGuid()
      }
    });

    //  实际请求http://localhost:8080/v1/tilesets/ldem_1024_30n_45n_090_120_lbl/tiles/11/3314/1410.terrain?v=1.1.0
    //  Cesium坐标原点是左上角，即Y轴向下，X轴向右
    const tile = await terrainProvider.requestTileGeometry(3314, 637, 11, request);

    if (tile) {
      console.log('瓦片数据:', {
        boundingSphere: tile.boundingSphere,
        vertices: tile.vertices,
        minimumHeight: tile.minimumHeight,
        maximumHeight: tile.maximumHeight,
        // ... 其他瓦片属性
      });
    }
  } catch (error) {
    console.error('请求瓦片失败:', error);
  }
}


// 添加地形的功能
document.getElementById('addTerrain2').onclick = async () => {
  const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl("https://marshub.s3.amazonaws.com/moon_v14",
    {
      requestVertexNormals: true
    });

  // 加载特定瓦片
  try {
    const request = new Cesium.Request({
      type: Cesium.RequestType.TERRAIN,
      headers: {
        'Authorization': 'Bearer ' + Cesium.createGuid()
      }
    });

    //  实际请求地址
    const tile = await terrainProvider.requestTileGeometry(18, 5, 4, request);

    if (tile) {
      console.log('瓦片数据:', {
        boundingSphere: tile.boundingSphere,
        vertices: tile.vertices,
        minimumHeight: tile.minimumHeight,
        maximumHeight: tile.maximumHeight,
        // ... 其他瓦片属性
      });
    }
  } catch (error) {
    console.error('请求瓦片失败:', error);
  }
}


// 启用地形深度测试
viewer.scene.globe.enableLighting = true
